<template>
    <view class="home">
      <view class="stars">
          <view class="star"></view>
          <view class="star pink"></view>
          <view class="star blue"></view>
          <view class="star yellow"></view>
      </view>
      <view class="stars">
          <view class="star"></view>
          <view class="star pink"></view>
          <view class="star blue"></view>
          <view class="star yellow"></view>
      </view>
      <view class="home_nav u-flex u-ali-center u-ju-around">
        <span :class="navIndex == index ?'nav_item_active':'nav_item'" @click="navChangeBtn(index)"
          v-for="(item,index) in navList" :key="index">{{item}}</span>
      </view>
      <view class="home_circle" :style="{top: topvalue + 'rpx'}" @click="openNavTabber()">
        <view class="home_cowndol">
          {{number}}
        </view>
        
      </view>
      <view class="home_bottom">
        <view class="home_bottom_flex u-flex u-ju-around u-ali-center">
          <view class="flex_item" v-for="(item,index) in tarbarList.slice(0,3)" :key="index" @click="openUrl(item.path)">
            <view class="item_icon">
              <image :src="item.icon" mode="heightFix"></image>
            </view>
            <view class="item_text">
              {{item.name}}
            </view>
          </view>
        </view>
        <view class="home_bottom_flex u-flex u-ju-around u-ali-center" style="margin-top: 31rpx;">
          <view class="flex_item" v-for="(item,index) in tarbarList.slice(3,6)" :key="index" @click="openUrl(item.path)">
            <view class="item_icon">
              <image :src="item.icon" mode="heightFix"></image>
            </view>
            <view class="item_text">
              {{item.name}}
            </view>
          </view>
        </view>
        <view class="home_bottom_flex u-flex u-ju-around u-ali-center" style="margin-top: 31rpx;">
          <view class="flex_item" v-for="(item,index) in tarbarList.slice(6)" :key="index" @click="openUrl(item.path)">
            <view class="item_icon">
              <image :src="item.icon" mode="heightFix"></image>
            </view>
            <view class="item_text">
              {{item.name}}
            </view>
          </view>
        </view>
      </view>
      <!-- 最新公告 -->
      <u-popup :show="showNotice" mode="center" @close="showNotice = false">
        <div class="overlay-show">
          <div class="overlay-con-div">
            <div class="flex-between-center overlay-con overlay-con-notice">
              <!-- <div class="notice-name">
              最新公告
            </div> -->
              <div ref="overNotice" class="over-notice-con div-sizing" v-html="newNotice.description" />
              <div class="overlay-btm">
                <div class="pop-btn" @click="showNotice = false">
                  我知道了
                </div>
              </div>
            </div>
          </div>
        </div>
        </div>
      </u-popup>
    
    </view>
</template>

<script>
  import {
    userIndex,
    getNewNotice
  } from '@/api/user.js'
  import {
    getRewardIndex
  } from '@/api/cardService/profit.js'
  import {
    getAddTrading
  } from '@/api/cardService/card.js'
  export default {
    data() {
      return {
        number: 0,
        showNotice: false,
        newNotice: '',
        navList: ['今日收益', '昨日收益', '累积收益'],
        tarbarList: [{
            icon: '../../static/home/wode.png',
            name: '我的',
            path: '/pages/mine/mine'
          },
          {
            icon: '../../static/home/shangcheng.png',
            name: '商城',
            path: '/pages/shop/shop'
          },
          {
            icon: '../../static/home/qianggou.png',
            name: '抢购',
            path: '/pages/cardService/cardList'
          },
          {
            icon: '../../static/home/DAPP.png',
            path: '/pages/mine/dapp/dapp',
            name: 'DAPP'
          },
          {
            icon: '../../static/home/kuangji.png',
            path: '/pages/kuangji/index',
            name: '矿机'
          },
          {
            icon: '../../static/home/shangcheng.png',
            name: '卡市',
            path: '/pages/mine/card/cardshop'
          },
          {
            icon: '../../static/home/shichang.png',
            name: '市场',
            path: '/pages/deal/index'
          },
          {
            icon: '../../static/home/duihuan.png',
            name: '兑换',
            path: '/pages/duihuan/index'
          }, {
            icon: '../../static/home/duihuan.png',
            name: '必中卡',
            path: '/pages/cardService/cardNecessary'
          }
        ],
        img: '../../../static/home/ciecle_banner.png',
        navIndex: 0,
        list: '',
        assets: [],
        topvalue: ''
      }
    },
    methods: {
      // 切换tabbar
      navChangeBtn(index) {
        this.navIndex = index
        if (index == 2) {
          // 微分
          this.number = this.assets.allReward || 0
        } else if (index == 0) {
          // 点击资产
          this.number = this.assets.todayReward || 0
        } else if (index == 1) {
          // 点击收益
          this.number = this.assets.yesterdayReward || 0
        }
      },
      // 跳转
      openNavTabber() {
        this.openUrl('/pages/cardService/profit')
      },

      openUrl(path) {
        this.$ui.push(path)
      }
    },
    onLoad() {
      if (!this.$ui.getStorage('showNotice')) {
        getNewNotice().then((res) => {
          if (res.code === 1) {
            this.newNotice = res.data
            this.showNotice = true // 是否打开弹窗
          }
        })
        this.$ui.setStorage('showNotice', 'true')
      }
    },
    onShow() {
      getRewardIndex({
        page: 1,
        type: 8
      }).then(res => {
        if (res.code == 1) {
          this.assets = res.data.assets
          this.number = this.assets.todayReward
        }
      })
      this.navIndex = 0
      userIndex().then(res => {
        if (res.code == 1) {
          this.$ui.setStorage('userIndex', res.data)
          this.list = res.data.user

        } else if (res.code == 401) {
          this.$ui.push('/pages/login/index', 'reLaunch')
        }
      }).catch(err => {
        console.log('请求失败');
      })
      uni.getSystemInfo({
        success: (res) => {
          // 注意这里获得的高度宽度都是px，需要转换rpx
          // console.log(res.screenHeight); // 屏幕高度，包含导航栏
          // console.log(res.screenWidth); // 屏幕宽度
          // console.log(res.windowHeight); // 可使用窗口高度，不包含导航栏
          if (res.windowHeight > 800) {
            this.topvalue = res.windowHeight / 10 + 50
            return
          }
          this.topvalue = res.windowHeight / 10 + 20
          console.log('this.topvalue==', this.topvalue)
          // console.log(res.windowWidth); // 可使用窗口宽度
          // 可使用窗口高度，将px转换rpx
          // this.phoneHeight = (res.windowHeight * (750/res.windowWidth))
          // console.log(this.phoneHeight)
        }
      })
    }
  }
</script>

<style lang="less">
  .home {
    width: 100%;
    height: 100vh;
    background-color: rgb(51, 51, 51);
    overflow: hidden;

    .home_nav {
      margin: 111rpx auto 0;
      width: 595rpx;
      height: 73rpx;
      background: #F4F4F4;
      border-radius: 37rpx;

      .nav_item_active {
        width: 178rpx;
        height: 100%;
        background: #FFFFFF;
        border-radius: 37rpx;
        line-height: 73rpx;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #D0A054;
        text-align: center;
      }

      .nav_item {
        width: 178rpx;
        height: 100%;
        font-size: 28rpx;
        line-height: 73rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
        text-align: center;
      }
    }

    .home_circle {
      position: relative;
      // top: 50rpx;
      margin: 0 auto;
      width: 355rpx;
      height: 355rpx;
      background-image: url('@/static/home/ciecle_banner.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      animation: moveTop 2s linear alternate infinite;

      .home_cowndol {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        font-size: 40rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        text-align: center;
      }
    }

    @keyframes moveTop {
      0% {
        transform: translateY(40rpx);
      }

      50% {
        transform: translateY(0rpx);
      }

      100% {
        transform: translateY(-40rpx);
      }
    }

    .home_bottom {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 670rpx;
      background-color: #fff;
      border-radius: 90rpx 90rpx 0 0;
      overflow: hidden;

      .home_bottom_flex {
        margin: 70rpx auto 0;
        width: 684rpx;
        height: 151rpx;
        background: #FFFFFF;
        box-shadow: 4rpx 1rpx 15rpx 1rpx rgba(0, 0, 0, 0.13);
        border-radius: 28rpx;

        .flex_item {
          flex: 1;

          .item_icon {
            text-align: center;

            image {
              height: 60rpx;
            }
          }

          .item_text {
            font-size: 28rpx;
            text-align: center;
          }
        }
      }
    }
  }

  .overlay-show {
    position: absolute;
    top: 0rpx;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .overlay-con-div {
      width: 664rpx;
      padding-bottom: 140rpx;
    }

    .overlay-con {
      width: 596rpx;
      height: 834rpx;
      padding: 236rpx 42rpx 0 42rpx;
      margin: 0 auto;
      color: #ffffff;
      box-sizing: border-box;
      background: url("~assets/home/success.png") no-repeat;
      background-size: 100% 100%;
      position: relative;
      align-items: flex-start;
      flex-direction: column;

      .result-div {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: column;

        .result-logo-div {
          width: 100%;
          height: 314rpx;
          margin-bottom: 6rpx;
          justify-content: center;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
        }

        .result-logo {
          width: auto;
          height: 100%;
        }

        .result-name {
          height: 44rpx;
          letter-spacing: 4rpx;
          color: #ffffff;
          font-size: 32rpx;
          margin-bottom: 28rpx;
        }

        .result-info {
          width: 100%;
          line-height: 42rpx;
          color: #ffffff;
          margin-bottom: 14rpx;

          .info-label {
            font-size: 32rpx;
          }

          .info-number {
            font-family: "DIN";
          }
        }
      }

      .vant-btn {}
    }

    .overlay-con-fail {
      width: 538rpx;
      height: 738rpx;
      padding: 158rpx 40rpx 0;
      background: url("~assets/home/fail.png") no-repeat;
      background-size: 100% 100%;

      .result-div {
        .result-info {
          color: #cbcbcb;
        }
      }

      .vant-btn {}
    }

    //公告
    .overlay-con-notice {
      width: 557rpx;
      height: 923rpx;
      margin: 0 auto;
      padding: 56rpx 50rpx 0;
      // background: #ffffff;
      background-image: url(../../assets/home/fail-g.png);
      // border: 12rpx solid #ffffff;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;

      .notice-name {
        line-height: 66rpx;
        font-size: 40rpx;
        color: #070707;
        margin-bottom: 32rpx;
      }

      .over-notice-con {
        width: 100%;
        height: 490rpx;
        overflow-y: scroll;
        font-size: 28rpx;
        color: #282828;
        margin-top: 40%;
        margin-left: 5%;

      }

      .overlay-btm {
        width: 100%;
        margin-top: -13%;
        // position: absolute;
        bottom: 16rpx;
        text-align: center;

        .van-button {
          width: 414rpx;
          height: 64rpx;
          line-height: 64rpx;
          font-size: 32rpx;
          padding: 0;
          left: 2.8rem;
          border: none;
          color: #ffffff;
          background: #0000;
          text-align: center;
        }
      }
    }
  }
  // 动态
  .star {
      display: block;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #FFF;
      top: 100px;
      left: 400px;
      position: relative;
      transform-origin: 100% 0;
      animation: star-ani 6s infinite ease-out;
      box-shadow: 0 0 5px 5px rgba(255, 255, 255, .3);
      opacity: 0;
      z-index: 2;
      position: fixed;
  }
    
  .star:after {
      content: '';
      display: block;
      top: 0px;
      left: 4px;
      border: 0px solid #fff;
      border-width: 0px 90px 2px 90px;
      border-color: transparent transparent transparent rgba(255, 255, 255, .3);
      transform: rotate(-45deg) translate3d(1px, 3px, 0);
      box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
      transform-origin: 0% 100%;
      animation: shooting-ani 1s infinite ease-out;
  }
    
  .pink {
      top: 30px;
      left: 395px;
      background: #ff5a99;
      animation-delay: 5s;
      -webkit-animation-delay: 5s;
      -moz-animation-delay: 5s;
  }
    
  .pink:after {
      border-color: transparent transparent transparent #ff5a99;
      animation-delay: 5s;
      -webkit-animation-delay: 5s;
      -moz-animation-delay: 5s;
  }
    
  .blue {
      top: 35px;
      left: 432px;
      background: cyan;
      animation-delay: 7s;
      -webkit-animation-delay: 7s;
      -moz-animation-delay: 7s;
  }
    
  .blue:after {
      border-color: 'transpareanimation-delay: 12s';
      -webkit-animation-delay: 7s;
      -moz-animation-delay: 7s;
      animation-delay: 7s;
  }
    
  .yellow {
      top: 50px;
      left: 600px;
      background: #ffcd5c;
      animation-delay: 5.8s;
  }
    
  .yellow:after {
      border-color: transparent transparent transparent #ffcd5c;
      animation-delay: 5.8s;
  }
    
  @keyframes star-ani {
      0% {
          opacity: 0;
          transform: scale(0) rotate(0) translate3d(0, 0, 0);
          -webkit-transform: scale(0) rotate(0) translate3d(0, 0, 0);
          -moz-transform: scale(0) rotate(0) translate3d(0, 0, 0);
      }
    
      50% {
          opacity: 1;
          transform: scale(1) rotate(0) translate3d(-200px, 200px, 0);
          -webkit-transform: scale(1) rotate(0) translate3d(-200px, 200px, 0);
          -moz-transform: scale(1) rotate(0) translate3d(-200px, 200px, 0);
      }
    
      100% {
          opacity: 0;
          transform: scale(1) rotate(0) translate3d(-300px, 300px, 0);
          -webkit-transform: scale(1) rotate(0) translate3d(-300px, 300px, 0);
          -moz-transform: scale(1) rotate(0) translate3d(-300px, 300px, 0);
      }
  }
</style>
